<html>

<head>


<link rel="STYLESHEET" type="text/css" href="../common/styles.css">
</head>
<body>
	<table border="0" cellpadding="0" cellspacing="0" class="sample_header" zid="71">
		<tbody zid="3">
			<tr valign="center" zid="4">
				<td align="center" width="10" zid="5">&nbsp;</td>
				<td align="left" zid="6">
					<p zid="224">
						<a href="http://www.dhtmlx.com/" zid="7">DHTMLX</a> Documentation
					</p>
				</td>
			</tr>
		</tbody>
	</table>
	<!--- CONTENT. Starts --->
	                       
<h2 id="s96x0">Managed Drag and Drop<br id="xa5v">
</h2>
<h3 id="fppj">Existing events order<br id="veqn">
</h3>
The next events are generated in the course of d-n-d process :<br id="lk1r">
<br id="nv3.">
<ol id="p1x6">
<li id="zlbv">onBeforeDrag - event occurs when drag operation is started; the event can be blocked (dhtmlxgrid 1.5.1 +);<br id="edzf">
</li>
<li id="ievr">onDragIn - event occurs when an item is dragged to another potential target, the event can be blocked;</li>
<li id="hn7s">onDragOut - event occurs when an item is dragged out from the potential target (dhtmlxgrid 1.5.1 +);</li>
<li id="qytz">onDrag - event occurs when an item is dragged to another target and the mouse is released, the event can be blocked;</li>
<li id="gq95">onDrop - event occurs when d-n-d operation is finished.</li>
</ol>
<br id="tjh-">
In the default scenario there is no need to use any of the mentioned events, because the grid will process all the operations on its own. But sometimes default behavior needs to be customized - this is the time when the mentioned events can be used.<br id="n5fp">
<h3 id="u_82">Control  drag start<br id="j:7a">
</h3>
A very common use case is as follows: only specified items can be dragged. This can be implemented by using <b id="z_eb">onBeforeDrag </b>event.<br id="i.3q">
In xml we can mark items that can be dragged in any possible way. In the following snippet it is marked by user data: <br id="ik.t">
<blockquote id="lvrp">&lt;rows&gt;<br id="u56o">
&nbsp;&nbsp;&nbsp;&nbsp;&lt;row id="1"&gt;&lt;cell&gt; data 2 &lt;/cell&gt;&lt;/row&gt;<br id="u7kz">
&nbsp;&nbsp;&nbsp;&nbsp;&lt;row id="2"&gt;&lt;cell&gt; data 2 &lt;/cell&gt;<br id="htz0">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;userdata name="drag"&gt;allow&lt;/userdata&gt;<br id="mo7e">
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/row&gt;<br id="ke:s">
&lt;/rows&gt;<br id="ak7.">
</blockquote>
After that we&nbsp;can add the following code to grid initialization:<br id="zl:e">
<blockquote id="tag7">grid.attachEvent("onBeforeDrag",function(id){<br id="c83c">
&nbsp;&nbsp;&nbsp;&nbsp;if (grid.getUserData(id,"drag")=="allow") return true;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//allow drag if user data exists<br id="mk82">
&nbsp;&nbsp;&nbsp;&nbsp;return false;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//deny drag for any other cases<br id="nbsa">
}<br id="tonf">
</blockquote>
From now on each time d-n-d is started, user data of the dragged item will be checked, and d-n-d will be allowed only if it is set in XML.<br id="f6p_">
Of course it is possible to use any other kind of check here, that will return "true" to allow dragging and "false" to deny dragging.<br id="l_23">
<h3 id="skyj">Custom drag text<br id="l9ue">
</h3>
The second common use case - some custom content needs to be shown instead of the default item text. <br id="wfy3">
The grid has a predefined method which converts the row ID&nbsp;to&nbsp;its&nbsp;drag&nbsp;representation,&nbsp;but&nbsp;it&nbsp;can&nbsp;be&nbsp;redefined&nbsp;with&nbsp;custom&nbsp;logic:<br id="ywy_">
<blockquote id="j2bb">grid.rowToDragElement=function(id){<br id="ehcs">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//any custom logic here<br id="a58y">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var text =&nbsp;"&lt;img src='some.gif'&gt; - "+grid.cells(id,0).getValue(); //prepare text string<br id="t7du">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return text;<br id="cvdo">
}<br id="r2n5">
</blockquote>
In the above mentioned snippet the text of the dragged element will contain a fixed image and the value of the first column of the dragged row. As you can see it is possible to use any HTML inside the dragged text, so it is rather customizable.&nbsp;<br id="r48z">
In case of enabled multiselect in d-n-d, it is possible to create a drag representation which reflects not the text of the dragged items, but their number.<br id="t:vk">
<blockquote id="pv.2">grid.rowToDragElement=function(id){<br id="wd20">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//any custom logic here<br id="augj">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var text =&nbsp;grid._dragged.length + "item(s)";<br id="rf2c">
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return text;<br id="go25">
}<br id="vx-2">
</blockquote>
If you want to show the&nbsp;text&nbsp;of all the dragged items&nbsp;in&nbsp;case&nbsp;of&nbsp;d-n-d&nbsp;with&nbsp;multiselect&nbsp;it is possible&nbsp;to&nbsp;define the custom&nbsp;function&nbsp;as follows:<br id="gfz.">
<blockquote id="uo2y">grid.rowToDragElement=function(id){<br id="a76h">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//any custom logic here<br id="a.fk">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var text="";<br id="huw0">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i=0; i&lt;this._dragged.length; i++)<br id="yv3j">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text +=&nbsp;grid.cells(grid._dragged[i].idd,0).getValue() + "&lt;br/&gt;";<br id="kvyh">
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return text;<br id="p4r3">
}<br id="qi78">
</blockquote>
<h3 id="ulbm">Control drag landing<br id="b-3k">
</h3>
After the item's dragging has started, the next situation&nbsp;which&nbsp;can&nbsp;be&nbsp;managed&nbsp;-&nbsp;reaction&nbsp;of the drag&nbsp;landing&nbsp;on the dragged&nbsp;item.&nbsp;<br id="hh72">
There are two common use cases: <br id="wdsp">
<ul id="mj1d">
<li id="m99q">The landing must show some&nbsp;special&nbsp;reaction&nbsp;on the dragged&nbsp;item;<br id="buz:">
</li>
<li id="c4tm">The landing must be enabled|disabled based on some rules (e.g. allow to drag A in B, but deny drag B in A).</li>
</ul>
<br id="fn3.">
<br id="myhv">
To add some custom visualization to the dragged item's landing <b id="cs4h">onDragIn</b>&nbsp;and&nbsp;<b id="osag">onDragOut</b> events may be used in the following way: <br id="usfx">
<blockquote id="lva3">var last_marker = null;<br id="m5hg">
mygrid.attachEvent("onDragIn",function(sid,tid,sgrid,tgrid){<br id="uosl">
&nbsp;&nbsp;&nbsp;&nbsp;// sid - id of dragged item , tid - id of landing item<br id="s94d">
&nbsp;&nbsp;&nbsp;&nbsp;if (tid)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// tid may be null if landing is in grid body<br id="xyen">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;grid.setRowTextStyle(tid,"background-color:red;");&nbsp;&nbsp;&nbsp;&nbsp;// mark current landing <br id="hgpp">
&nbsp;&nbsp;&nbsp;&nbsp;return true; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// mandatory! important!<br id="skx4">
}) <br id="fb9v">
mygrid.attachEvent("onDragOut",function(tid){<br id="lnx.">
&nbsp;&nbsp;&nbsp;&nbsp;if (tid)<br id="xnz6">
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;grid.setRowTextStyle(tid,"");&nbsp;//&nbsp;clear&nbsp;styles&nbsp;which were set&nbsp;on the previous step<br id="wi3d">
})<br id="c..c">
</blockquote>
This snippet will be called each time&nbsp;when any item is dragged. It sets background&nbsp;color&nbsp;to&nbsp;red when the dragged item enters the borders of any possible&nbsp;landing, and clears background color&nbsp;after the item is moved outside landing's borders.<br id="z9h8">
Of course, in a real application another neater visualization can be used.<br id="s_uw">
<br id="soeh">
To enable|disable landing - <b id="az3b">onDragIn </b>event is just enough. For example, we have the following XML: <br id="q0l1">
<blockquote id="z0tw">&lt;rows&gt;<br id="mrf4">
&nbsp;&nbsp;&nbsp;&nbsp;&lt;row id="1"&gt;&lt;cell&gt; data 1 &lt;/cell&gt;<br id="l.xf">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;userdata name="drag"&gt;category&lt;/userdata&gt;&lt;/row&gt;<br id="xelh">
&nbsp;&nbsp;&nbsp;&nbsp;&lt;row id="2"&gt;&lt;cell&gt; data  2&lt;/cell&gt;<br id="r5-p">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;userdata name="drag"&gt;category&lt;/userdata&gt;&lt;/row&gt;<br id="q0ha">
&nbsp;&nbsp;&nbsp;&nbsp;&lt;row id="3"&gt;&lt;cell&gt; data  3&lt;/cell&gt;<br id="vmxm">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;userdata name="drag"&gt;item&lt;/userdata&gt;&lt;/row&gt;<br id="ql-c">
&nbsp;&nbsp;&nbsp;&nbsp;&lt;row id="4"&gt;&lt;cell&gt; data  4&lt;/cell&gt;<br id="ui6q">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;userdata name="drag"&gt;item&lt;/userdata&gt;&lt;/row&gt;<br id="vpkn">
&lt;/rows&gt;<br id="l9c4">
</blockquote>
We can implement "category" and "item" logic (i.e. item can be dropped only in category) in the following way:<br id="rqcn">
<blockquote id="kbfu">grid.attachEvent("onDragIn",function(sid,tid){<br id="a8dp">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (grid.getUserData(tid,"drag")=="item") return false; // nothing can be dropped in an item, block landing<br id="aiku">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return true;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;in any other cases - allow&nbsp;landing <br id="p3_t">
});<br id="zy55">
</blockquote>
To block the operation we just return "false" from <b id="dw_e">onDragIn </b>event.<br id="t1lh">
The described scenario has more sense for TreeGrid, but it can be also used with some customization in case of plain Grid as well.<br id="uf6d">
<h3 id="lev8">Control drop<br id="mcnv">
</h3>
After the item&nbsp;was&nbsp;dragged&nbsp;and&nbsp;dropped,&nbsp;the&nbsp;next&nbsp;stage&nbsp;of&nbsp;process is initiated&nbsp;- the item&nbsp;needs to&nbsp;be&nbsp;correctly&nbsp;inserted&nbsp;in its new&nbsp;place. <br id="s1hb">
And&nbsp;again there is no need to do&nbsp;anything, but default existing&nbsp;logic that will&nbsp;process&nbsp;operation&nbsp;on&nbsp;its&nbsp;own.<br id="h1pk">
But in some cases we need to customize the operation:<br id="p-wn">
<ul id="u1yn">
<li id="i21z">block d-n-d operation:<br id="fgyp">
</li>
</ul>
<blockquote id="t4t7">mygrid.attachEvent("onDrag",function(sid,tid){<br id="ip-y">
&nbsp;&nbsp;&nbsp;&nbsp;if (!some_check(sid,tid)) return false; //block d-n-d<br id="jsge">
&nbsp;&nbsp;&nbsp;&nbsp;return true;<br id="mtwe">
});<br id="bl1d">
</blockquote>
<ul id="g17z">
<li id="tvyj">dynamically switch between move&nbsp;and&nbsp;copy behaviors:</li>
</ul>
<blockquote id="bhl1">mygrid.attachEvent("onDrag",function(sid,tid){<br id="eis4">
&nbsp;&nbsp;&nbsp;&nbsp;if (!some_check(sid,tid)) mygrid.dragContext.mode="copy"; // copy item instead of moving it<br id="gyei">
&nbsp;&nbsp;&nbsp;&nbsp;return true;<br id="yy.7">
});<br id="hzt.">
</blockquote>
The <b id="x_ue">dragContext </b>object is available during the <b id="d:n6">onDrag </b>event and it contains the following properties:<br id="mepf">
<ol id="l:70">
<li id="eu_4">dragContext.source - type of the source component ("tree","grid","treeGrid");<br id="ykn9">
</li>
<li id="a0mz">dragContext.target - type of the target component;<br id="zvhc">
</li>
<li id="fs9e">dragContext.sobj - the source object;<br id="tjid">
</li>
<li id="b2rk">dragContext.tobj - the target object;<br id="idqa">
</li>
<li id="tmix">dragContext.dropmo<span id="land" style="background-color: rgb(255, 255, 255);">de - </span><span id="pbd4" style="background-color: rgb(255, 255, 255);">whether the dragged item will be a "child" or a "sibling";</span><br id="izhv">
</li>
<li id="ek.x">dragConetxt.m<span id="vj:o" style="background-color: rgb(255, 255, 255);">ode - </span><span id="ti-g" style="background-color: rgb(255, 255, 255);">whether the dragged item will be copied or just moved: "copy" or "move";</span><br id="qh.y">
</li>
<li id="t.:i">dragContext.slist() - ID(s) of the dragged item(s);<br id="v9of">
</li>
<li id="g0oc">dragContext.tid - ID of the drag landing item;</li>
</ol>
<span id="wzqj" style="background-color: rgb(255, 255, 255);">Any of these properties can be changed, and further dragging process will use the changed value instead of the original one.</span><br id="l.to">
<br id="t8:s">
<ul id="c289">
<li id="y.jw">just fire some custom functionality instead of moving an item:</li>
</ul>
<blockquote id="nq5r">mygrid.attachEvent("onDrag",function(sid,tid){<br id="wnyz">
&nbsp;&nbsp;&nbsp;&nbsp;some_custom_code(sid,tid);<br id="gr1k">
&nbsp;&nbsp;&nbsp;&nbsp;return false;<br id="x4hg">
});<br id="becb">
</blockquote>
<ul id="r_5e">
<li id="s0.j">moving an item, but with some specific rules:</li>
</ul>
<blockquote id="lpzr">mygrid.attachEvent("onDrag",function(sid,tid){<br id="g2uy">
&nbsp;&nbsp;&nbsp;&nbsp;mygrid.moveRowTo(sid,someID,"copy","sibling"); //moving an item as a sibling of some other&nbsp;element <br id="pc0t">
&nbsp;&nbsp;&nbsp;&nbsp;return false; // block default d-n-d<br id="pxuy">
});<br id="al2i">
</blockquote>
Data conversion is required when d-n-d process occurs between different grids. This can be done by redefining <b id="h.r4">gridToGrid </b>method:<br id="tk7:">
<blockquote id="dla:">grid.gridToGrid = function(rowId,sgrid,tgrid){<br id="tq_2">
    &nbsp;&nbsp;&nbsp;&nbsp;var z=[];&nbsp; <br id="a.ex">
&nbsp;&nbsp;&nbsp;&nbsp;for (var i=0; i&lt;sgrid.getColumCount(); i++)&nbsp;&nbsp;&nbsp;&nbsp;// for each cell in the source grid<br id="ol.i">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;z[i]=sgrid.cells(rowId,i).getValue(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// prepare data for&nbsp;target&nbsp;grid <br id="cb0k">
&nbsp;&nbsp;&nbsp;&nbsp;return z;<br id="sp47">
}<br id="hv_7">
</blockquote>
This snippet just copies the data, without applying any modifications to it. In a real application it may c<span id="utpi" style="background-color: rgb(255, 255, 255);">hange data </span><span id="utpi" style="background-color: rgb(255, 255, 255);">order </span><span id="ozmh" style="background-color: rgb(255, 255, 255);">or add|delete </span><span id="mz3h" style="background-color: rgb(255, 255, 255);">some of it.</span><br id="dyyz">
 <br id="he63">
In case when d-n-d process occurs from tree to grid, the same can be done by redefining treeToGridElement or&nbsp;gridToTreeElement:<br id="i-t9">
 
<blockquote id="ors4">grid.gridToTreeElement = function(tree,treeID,gridID){<br id="v6-2">
   &nbsp;&nbsp;&nbsp;&nbsp;return this.cells(gridId,0).getValue(); &nbsp;// take data from the first column as a value for tree<br id="x_y5">
}<br id="q40p">
</blockquote>
<blockquote id="c9g7">
<p id="glsy">grid.treeToGridElement = function(tree,treeID,gridID){<br id="q9lk">
   &nbsp;&nbsp;&nbsp;&nbsp;var z=[treeObj.getItemText(treeID)];&nbsp;&nbsp;//set the tree&nbsp;text&nbsp;as a value&nbsp;of the first&nbsp;column&nbsp;in the grid <br id="sirc">
&nbsp;&nbsp;&nbsp;&nbsp;return z;<br id="x765">
}<br id="k1yp">
</p>
</blockquote>
<h3 id="z7s-">Receiving final info about d-n-d<br id="hgu8">
</h3>
The last event - <b id="nre7">onDrop </b>- occurs when an item is already placed in its final position. It can be used to catch the moment when the operation is finished.<br id="aups">
The first parameter of <b id="t4:4">onDrop</b> event is item's ID after moving (in case of "copy" behavior it will differ from original item's ID).<br id="qvxq">
This event can be used to save the data or to update some other UI based on d-n-d results.<br id="i.q5">
<h3 id="sp95">Some details about d-n-d API<br id="lzrz">
</h3>
In case when d-n-d process occurs in TreeGrid it is possible to select one of the following behaviors (by setDragBehavior):<br style="background-color: rgb(255, 255, 255);" id="om.v">
<ul id="csj3">
<li id="kdjz"><span id="s:3." style="background-color: rgb(255, 255, 255);">child - the item </span>is <span id="pi_y" style="background-color: rgb(255, 255, 255);">dropped as a child of the target item;</span><br id="sivu">
</li>
<li id="dh:d">sibling - the item is dropped as a sibling of the target item; if drop&nbsp;occurs&nbsp;between the parent and the child elements, the item is moved on the <b id="b6q0">parent</b> level;</li>
<li id="voyb"><span id="j5b7" style="background-color: rgb(255, 255, 255);">complex - the </span><span id="w5pz" style="background-color: rgb(255, 255, 255);">item is dropped as a sibling or a child depending on the position of the target item towards the landing</span><span id="cotu" style="background-color: rgb(255, 255, 255);">;</span> if drop&nbsp;occurs&nbsp;between the parent and the child elements, the item is moved on the <b id="bzv.">parent</b> level;</li>
<li id="p_lk">sibling-next - the item is dropped as a sibling of the target; if drop&nbsp;occurs&nbsp;between the parent and the child elements, the item is moved on the <b id="ga_0">child</b> level;</li>
<li id="yt1c">complex-next - <span id="eq3l" style="background-color: rgb(255, 255, 255);">the item is dropped as a sibling or a child </span><span id="w5pz" style="background-color: rgb(255, 255, 255);">depending on the position of the target item towards the landing</span>; if drop&nbsp;occurs&nbsp;between the parent and the child elements, the item is moved on the <b id="tz_y">child</b> level.</li>
</ul>
<br id="z:dx">
Drag as copy for all the elements can be enabled by&nbsp;<b id="mxp2">enableMercyDrag </b>command.<br id="wk:e">
<br id="g3j_">
<br id="yd-g">

	<!--- CONTENT. Ends --->
	<div class="copyright" zid="223">&copy; DHTMLX, 2008</div>
</body>
</html>
